<template>
    <div class="app-container">
     <!--查询表单-->
   <div class="search-div">
         <el-form label-width="70px" size="small">
           <el-row>
             <!-- 操作人员类型 -->
             <el-col :span="8" >
                <el-form-item label="操作人员类型" label-width="100px">
                    <template>
                <el-select v-model="searchObj.operator_type" placeholder="请选择">
                    <el-option
                    v-for="item in typeOptions"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id">
                    </el-option>
                </el-select>
                </template>
               </el-form-item>
             </el-col>
             <!-- 操作状态 -->
             <el-col :span="8" >
                <el-form-item label="操作状态" label-width="100px">
                    <template>
                <el-select v-model="searchObj.status" placeholder="请选择">
                    <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id">
                    </el-option>
                </el-select>
                </template>
               </el-form-item>
             </el-col>
            <!-- 条件查询 -->
             <!-- <el-col :span="8">
               <el-form-item label="关键字">
                 <el-input style="width: 100%" v-model="searchObj.keyword" placeholder="手机/姓名/身份证"></el-input>
               </el-form-item>
            </el-col> -->
            
            <!-- 操作时间查询 -->
           </el-row>
           <el-row>
            <el-col :span="8">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="createTimes"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="margin-right: 10px; width: 100%"
              />
            </el-form-item>
          </el-col>
           </el-row>
           <el-row style="display:flex">
             <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
             
           </el-row>
         </el-form>
       </div>
   
           <!-- 工具条 -->
   <div class="tools-div">
    <el-button @click="toggleSelection()">取消选择</el-button>
     <!-- <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button> -->
   </div>
   
       <!-- 表格 -->
       <el-table
         v-loading="listLoading"
         :data="list"
         stripe
         border
         
         highlight-current-row
         
         @selection-change="handleSelectionChange"
         style="width: 100%;margin-top: 10px;">
    
         <el-table-column  type="selection" width="55">

         </el-table-column>
         <el-table-column
           label="序号"
           width="70"
           align="center">
           <template slot-scope="scope">
             {{ (page - 1) * limit + scope.$index + 1 }}
           </template>
         </el-table-column>
   
         
         <el-table-column prop="title" label="请求模块" />
         <!-- <el-table-column prop="sex" label="" >
            <template slot-scope="scope">
          <span v-if="scope.row.sex===0">男</span>
          <span v-if="scope.row.sex===1">女</span>
        </template>
            </el-table-column> -->
         <el-table-column prop="method" label="方法名称" />
         <el-table-column prop="requestMethod" label="请求方式" />
         <el-table-column prop="operUrl" label="请求url"  show-overflow-tooltip/>
         <el-table-column prop="businessType" label="业务类型" />
         <el-table-column prop="method" label="操作类别" />
         <el-table-column prop="operatorType" label="操作人员" >
          <template slot-scope="scope">
          <el-tag  v-if="scope.row.operatorType===0">其他</el-tag>
          <el-tag type="danger" v-if="scope.row.operatorType===1">后台用户</el-tag>
          <el-tag type="danger" v-if="scope.row.operatorType===2">手机端用户</el-tag>
        </template>
         </el-table-column>
         <el-table-column prop="deptName" label="部门名称" />
         
         <el-table-column prop="operIp" label="ip" />
         
         <el-table-column prop="status" label="操作状态" >
          <template slot-scope="scope">
          <el-tag  v-if="scope.row.status===0">正常</el-tag>
          <el-tag type="danger" v-if="scope.row.status===1">异常</el-tag>
        </template>
         </el-table-column>
         <el-table-column prop="errorMsg" label="错误信息" />
         <el-table-column prop="operTime" label="操作时间" />
         
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
             <!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/> -->
             <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
           </template>
         </el-table-column>
       </el-table>
   
       
   
            <!-- 分页组件 -->
     <el-pagination
       :current-page="page"
       :total="total"
       :page-size="limit"
       :page-sizes="[3,10,20,100]"
       style="padding: 30px 0; text-align: center;"
       layout="total, sizes,prev, pager, next, jumper"
       @current-change="fetchData"
       @size-change="handleCurrentChange"
     />
    </div>
   </template>
   
   <script>
   import api from '@/api/sysLog/log.js'
   import comApi from '@/api/sysCommunity/community'
   import houApi from '@/api/sysHouse/house'
   export default {
       data(){
           return {
   
            //搜索选择 --操作人员类别
            typeOptions:[
                {
                    id:0,
                    value:'其他'
                },
                {
                    id:1,
                    value:'后台用户'
                },
                {
                    id:2,
                    value:'手机端用户'
                },
            ],
          //操作状态选择  
            statusOptions:[
              {
                id:0,
                value:'正常'
              },
              {
                id:1,
                value:'异常'
              },
            ],
           listLoading:true,
           list:[],
           total:0,
           page:1,
           limit:3,
           searchObj:{},
           liveTime:'',
           sysLog:{},
           dialogVisible : false,
            //小区列表
          communityList:[],
          //  房产列表
          houseList:[],
          //被选择的集合
          multipleSelection:[],
           }
       },
       created(){
           this.fetchData(1);
       },
       methods:{
           //得到数据
           fetchData(page=1){
              this.listLoading = true;
               this.page = page;
               console.log(this.searchObj)
               console.log("limit:",this.limit)
               api.getPageList(this.page,this.limit,this.searchObj).then(res=>{
                   console.log(res.data)
                   this.list = res.data.records;
                   this.total = res.data.total;
                   this.listLoading = false;
               })
           },
   
           //重置按钮
           resetData(){
            // 清空表单
            this.searchObj={};
            this.liveTime='';
            // 再次刷新列表数据
            this.fetchData();
         },


      //查询所有小区 放入选择框
      fetchCommunityList(){
          comApi.finAllCommunity().then(res=>{
            this.communityList = res.data
          })
      },
      //查询所有房产 放入选择框
      fetchHouseList(){
          houApi.getPageList(1,100).then(res=>{
            // console.log(res)
            this.houseList = res.data.records
          })
      },

         removeDataById(id){
          console.log(id);
           this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             // 点击确定
             api.removeById(id).then(response=>{
                 // 1.给出提示
                 this.$message({
               type: 'success',
               message: '删除成功!'
             });
             this.listLoading = true;
                 //2. 再次刷新数据列表
                 this.fetchData()
             })
   
             
           })
         },
         handleCurrentChange(val) {
        this.limit = val
        this.fetchData()
      },

         //取消选择按钮
         toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //选择后触发的方法
         handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      }
   
       }
   
   }
   </script>
   
   <style>
   
   </style>